<template>
	<view class="content1">
		<view class="login" v-if="isLogin">
			<view class="login-box">
				<input type="text" v-model="name" class="name-class" />
				<input type="text" v-model="wwid" class="wwid-class" />
				
			</view>
			<view class="saveInfo" @click="surePiao" >
				
			</view>
		</view>
		<canvas canvas-id="canvas" id="canvas" style="width:750px; height:1624px;" class="canvas-hide" />
		<image :src="piaoSrc"
			style="width: 750rpx;height: 1624rpx;position: absolute;top: 0;left: 0;z-index: 999;"
			v-if="chakanhechengtu" ></image>
		<view class="letter-main">
			<input type="text" class="yisheng" v-model="modal.yisheng" :disabled="isEdit"/>
			<input type="number" class="year" v-model="modal.year"  :disabled="isEdit"/>
			<textarea v-model="modal.letter" class="letter" maxlength="100" :adjust-position="false"  :disabled="isEdit"/>
			
		</view>
		<view class="queding-button" @click="tijiao" v-if="!isEdit">
		
		</view>
		<text class="tips" v-if="isEdit">长按保存分享</text>
		<!-- <view class="qrcode-box" v-if="qrcodeShow">
			<image :src="qrcodeSrc" mode="widthFix" class="qrcode-pic"></image>
		</view>
		<canvas id="qrcode" canvas-id="qrcode"
			style="position: absolute;top: 0;flex: ;width: 117px;height: 117px;z-index: -1;" /> -->
	</view>
</template>

<script>
	import uQRCode from '@/components/uqrcode/common/uqrcode.js'
	import DrawPoster from '../../components/u-draw-poster/index.js'
	
	
	import drawQrCode, { errorCorrectLevel } from '../../components/u-draw-poster/extends/draw-qr-code/index.js'
	
	export default {
		data() {
			return {
				isLogin:true,
				modal: {
					yisheng: '',
					year: '',
					letter: ''
				},
				name:'',
				wwid:'',
				isEdit:false,
				userID:'',
				fileID:'',
				qrcodeSrc: '',
				qrcodeShow: false,
				chakanhechengtu:false,
				piaoSrc:'',
			}
		},
		methods: {
			async tijiao() {
				if (this.modal.yisheng !== '' && this.modal.year !== '' && this.modal.letter !== '') {
					console.log(this.modal)
					uni.showLoading({
						title: '正在生成',
						mask: true
					})
				
					// 上传到云
					let info = Object.assign(this.modal, {
						name: uni.getStorageSync('name'),
						wwid: uni.getStorageSync('wwid')
					})
					uniCloud.callFunction({
						name:'saveInfo',
						data:info
					}).then((res)=>{
						console.log(res)
					})
					/* 换行字体===开始 */
					const dp = await DrawPoster.build("canvas")
					dp.canvas.width = 750
					dp.canvas.height = 1624
					dp.draw(async (ctx) => {
						await ctx.drawImage('/static/makeletter/xinzhibg1.jpg', 0, 0, 750, 1624);
					})
					dp.draw(async (ctx) => {
						ctx.textBaseline = "top";
						ctx.textAlign = "start";
						ctx.fillStyle = "#606060";
						ctx.font = 'normal 30px 微软雅黑';
						await ctx.fillText('尊敬的'+this.modal.yisheng+'教授', 90, 470);
					})
					dp.draw(async (ctx) => {
						ctx.textBaseline = "top";
						ctx.textAlign = "start";
						ctx.fillStyle = "#606060";
						ctx.font = 'normal 24px 微软雅黑';
						await ctx.fillText('感谢您使用SURGIFLO'+this.modal.year+'年', 146, 540);
					})
					dp.draw(async (ctx) => {
						ctx.textBaseline = "top";
						ctx.textAlign = "start";
						ctx.fillStyle = "#606060";
						ctx.font = 'normal 24px 微软雅黑';
						let options = {
							  text: this.modal.letter,
							  x: 134,
							  y: 596,
								maxWidth: 420,
								lineHeight: 54,
								layer: 5
						}
						await ctx.fillWarpText(options)
					})
					
					dp.draw(async (ctx)=>{
					   await ctx.drawImage('/static/makeletter/qrcode.png', 302, 1156, 162, 162)
					 })
					const result = await dp.awaitCreate();
					console.log("draw绘制状况:", result);
					let posterImgUrl = await dp.createImagePath();
					console.log("绘制生成本地地址:", posterImgUrl);
					this.piaoSrc = posterImgUrl
					this.chakanhechengtu = true
					/* 换行字体===结束 */
					this.isEdit = true
				uni.hideLoading()
				} else {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none',
						mask: true
					})
				}
				
			},
			surePiao() {
				
				if (this.name!=='' && this.wwid!=='') {
					uniCloud.callFunction({
						name:'login',
						data:{name:this.name,wwid:Number(this.wwid)}
					}).then((res)=>{
						console.log(res)
						// debugger
						if (res.result.total>0) {
							this.isLogin = false
						} else{
							uni.showToast({
								title:'用户信息错误',
								icon:'error',
								mask:true
							})
							this.name = ''
							this.wwid = ''
						}
					})
					
					
					
				} else{
					uni.showToast({
						title:'请填写完整个人信息',
						icon:'none',
						mask:true
					})
				}
			},
		}
	}
</script>

<style scoped>
	page {
		background: url(../../static/makeletter/xinzhibg0.jpg) no-repeat center top;
		background-size: 100% auto;
	}

	.content1 {
		display: flex;
		flex-direction: column;
		height: 100%;
		position: relative;
		/* align-items: center; */
	}

	.letter-main {
		width: 528rpx;
		height: 370rpx;
		background: url(../../static/makeletter/wenbenkuang.png) no-repeat center center;
		background-size: 100% auto;
		margin-top: 474rpx;
		/* position: relative; */
		display: flex;
		margin-left: 90rpx;
		flex-direction: column;
	}

	.yisheng {
		width: 104rpx;
		height: 26rpx;
		line-height: 26rpx;
		font-size: 26rpx;
		color: #606060;
		/* background: #007AFF; */
		text-align: center;
		margin-top: -6rpx;
		margin-left: 98rpx;
	}

	.year {
		width: 76rpx;
		height: 26rpx;
		line-height: 26rpx;
		font-size: 26rpx;
		color: #606060;
		/* background: #007AFF; */
		text-align: center;
		margin-top: 36rpx;
		margin-left: 334rpx;
	}

	.letter {
		width: 494rpx;
		height: 254rpx;
		max-height: 254rpx;
		line-height: 56rpx;
		/* background: #007AFF; */
		overflow: hidden;
		font-size: 26rpx;
		color: #606060;
		margin-left: 48rpx;
		margin-top: 6rpx;
	}

	.queding-button {
		width: 270rpx;
		height: 54rpx;
		background: url(../../static/makeletter/btn-tijiao.png) no-repeat center center;
		background-size: 100% auto;
		margin: 0 auto;
		margin-top: 324rpx;
	}
.queding-button2 {
		width: 278rpx;
		height: 68rpx;
		background: url(../../static/makeletter/share.png) no-repeat center center;
		background-size: 100% auto;
		margin: 0 auto;
		margin-top: 86rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
		
	}
	.wenzi{
		font-size: 10px;
		color: #fff;
		line-height: 10px;
		margin-top: -8rpx;
	}
	.qrcode-box {
		width: 280rpx;
		height: 280rpx;
		border-radius: 20rpx;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		box-shadow: 0 8rpx 10rpx rgba(0, 0, 0, .4);
	
	}

.tips{
	font-size: 26rpx;
	color: rgba(0,0,0,.4);
	font-weight: bold;
	/* margin-top: 20rpx; */
	position: absolute;
	width: 50%;
	text-align: center;
	letter-spacing: 3px;
	top: 1030rpx;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000;
}
	.qrcode-pic {
		width: 117px;
		height: 117px;
	}
	.canvas-hide {
		position: fixed;
		right: 100vw;
		bottom: 100vh;
		z-index: -9999;
		opacity: 0;
		letter-spacing: 5px;
	}
	.login{
		position: fixed;
		width: 100%;
		height: 100%;
		background: url(../../static/makeletter/xinzhibg.jpg) no-repeat center top;
		background-size: 100% auto;
		z-index: 2;
		display: flex;
		flex-direction: column;
	}
	.login-box{
		width: 550rpx;
		height: 274rpx;
		background: url(../../static/makeletter/piaobg.png) no-repeat center center;
		background-size: 100% auto;
		position: relative;
		margin-left: 90rpx;
		margin-top: 640rpx;
	}
	.name-class {
		width: 146rpx;
		height: 34rpx;
		line-height: 34rpx;
		position: absolute;
		left: 202rpx;
		top: 240rpx;
		font-size: 12px;
		color: #555555;
		/* border: 1px solid #007AFF; */
	}
	
	.wwid-class {
		width: 106rpx;
		height: 34rpx;
		line-height: 34rpx;
		position: absolute;
		right: 0rpx;
		top: 240rpx;
		font-size: 12px;
		color: #555555;
		/* border: 1px solid #007AFF; */
	}
	.saveInfo{
		width: 432rpx;
		height: 54rpx;
		background: url(../../static/makeletter/piaobtn.png) no-repeat center center;
		background-size: 100% auto;
		margin: 0 auto;
		margin-top: 72rpx;
	}
</style>
